<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/iconfont/iconfont.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="{$Think.config.RESOURCEURL}wx_assets/css/zepto.alert.css" />
    <link href="{$Think.config.RESOURCEURL}wx_assets/personCenter/css/index.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="{$Think.config.RESOURCEURL}wx_assets/personCenter/js/mediaQuery.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type='text/javascript' src='{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js'></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js" type="text/javascript"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}"></script>
</head>
<body id="change-phone">
  <div class="first-step">
    <ul class="form">
      <li>
        <i class="iconfont">&#xe627;</i>
        <input type="number" placeholder="请输入手机号" class="phone"/>
      </li>
      <li>
        <i class="iconfont">&#xe64a;</i>
        <input type="number" placeholder="请输入验证码" class="code"/>
        <span class="sms-btn">获取验证码</span>
      </li>
    </ul>
    <div class="save-btn js-next-btn">下一步</div>
  </div>
  <div class="second-step" style="display: none">
    <div class="tips">请重新设置新密码</div>
    <div class="form normal-login">
      <ul class="form">
        <li>
          <i class="iconfont">&#xe6b2;</i>
          <input type="password" placeholder="请输入新密码" class="new-password"/>
        </li>
        <li>
          <i class="iconfont">&#xe6b2;</i>
          <input type="password" placeholder="请再次输入新密码" class="next-password"/>
        </li>
      </ul>
      <div class="save-btn js-submit-btn">提交</div>
    </div>
  </div>
<script>
  function Page() {
    this.string = '';
  };

  $.extend(Page.prototype, {
      init: function () {
          this.bindEvents();
          console.log($.util.getUa())
      },

      // 绑定事件
      bindEvents: function() {
          $('.sms-btn').click($.proxy(this.handleSendSmsBtnClick, this));
          $('.js-next-btn').click($.proxy(this.handleNextBtnClick, this));
          $('.js-submit-btn').click($.proxy(this.handleSubmitBtnClick, this));
      },

      // 点击发送验证码按钮
      handleSendSmsBtnClick: function() {
        var phone = $('.phone').val();
        if ($('.sms-btn').hasClass('disabled')) return;
        if (!phone) {
          $.util.alert("请输入手机号码！");
          return false;
        }
        if(!(/^1[34578]\d{9}$/.test(phone))){
          $.util.alert("手机号码有误，请重填");
          return false;
        }
        var params = {
          phone: phone
        }
        $.ajax({
            type: "get",
            url: '{$Think.config.SERVER_HOST}call.json?customerId={$customerId}',
            dataType: 'json',
            data: {
              module: 'personCenter',
              method: 'verifyPhone',
              params: JSON.stringify(params)
            },
            success: $.proxy(this.handleGteSmsSucc, this)
        });
      },

      // 获取短信成功后执行
      handleGteSmsSucc: function(res) {
        if (res && +res.code === 0) {
          $('.sms-btn').addClass('disabled');
          var second = 60;
          $('.sms-btn').text('60s后重新获取')
          var timer = setInterval(function(){
            $('.sms-btn').text(--second + 's后重新获取')
            if (second <= 0) {
              clearInterval(timer);
              $('.sms-btn').removeClass('disabled');
              $('.sms-btn').text('获取验证码');
            }
          }, 1000)
        } else {
          $.util.alert(res.msg);
        }
      },

      // 点击下一步按钮
      handleNextBtnClick: function() {
        var phone = $('.phone').val();
        var code = $('.code').val();
        if (!phone) {
          $.util.alert("请输入手机号码！");
          return false;
        }
        if(!(/^1[34578]\d{9}$/.test(phone))){
          $.util.alert("手机号码有误，请重填");
          return false;
        }
        if (!code) {
          $.util.alert("请输入验证码！");
          return false;
        }
        var params = {
          phone: phone,
          code: code
        }
        $.ajax({
            type: "get",
            url: '{$Think.config.SERVER_HOST}call.json?customerId={$customerId}',
            dataType: 'json',
            data: {
               module: 'personCenter',
               method: 'forgotPassword',
               params: JSON.stringify(params)
            },
            success: $.proxy(this.handleVerifyCodeSucc, this),
            error: $.proxy(this.handleAjaxError, this)
        });
      },

      // 验证手机号成功后执行
      handleVerifyCodeSucc: function(res) {
        if (res && +res.code === 0) {
          $('.first-step').css('display', 'none');
          $('.second-step').css('display', 'block');
          this.string = res.string;
        } else {
          $.util.alert(res.msg);
        }
      },

      // 点击提交按钮
      handleSubmitBtnClick: function() {
        var phone = $('.phone').val();
        var pwd = $('.new-password').val();
        var nPwd = $('.next-password').val();
        if (!pwd) {
          $.util.alert("请输入密码！");
          return false;
        }
        if(nPwd !== pwd){
          $('.next-password').val('');
          $.util.alert("两次输入的密码不一致，请重填！");
          return false;
        }
        var params = {
          password: pwd,
          phone: phone,
          string: this.string
        }
        $.ajax({
            type: "get",
            url: '{$Think.config.SERVER_HOST}call.json?customerId={$customerId}',
            dataType: 'json',
            data: {
               module: 'personCenter',
               method: 'resetPassword',
               params: JSON.stringify(params)
            },
            success: $.proxy(this.handleSaveSucc, this),
            error: $.proxy(this.handleAjaxError, this)
        });
      },

      // 保存成功
      handleSaveSucc: function(res) {
        if (res && +res.code === 0) {
          $.util.alert(res.msg);
          history.back();
        } else {
          $.util.alert(res.msg);
        }
      },

      // ajax请求出错
      handleAjaxError: function(err) {
        $.util.alert(err);
      }
  }) ;

  var page = new Page();
  page.init();
</script>
</body>
</html>
